<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('泵站选择')" />
	<th:block th:include="include :: ztree-css" />
</head>
<style>
	body{height:auto;font-family: "Microsoft YaHei";}
	button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
	#station-content label{
		border: 1px gray solid;
		border-radius: 10px;
		margin-left: 3px; 
		cursor: pointer;
	}
</style>
<body class="hold-transition box box-main">
	<input id="psId"   name="psId"    type="hidden"/>
	<input id="stationName" name="stationName"  type="hidden"/>
	<div class="form-group">
	<div class="treeSearchInput" id="search-name">
		<label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" required="required" maxlength="50">
		<button class="btn" id="btn" onclick="selectStationByName()"> 搜索 </button>
	</div>
	</div>
	<div id="station-content" class="">
		<!-- <label class="col-sm-4 control-label content-search"></label> -->
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: ztree-js" />  
	<script th:inline="javascript">
	
		function selectStationByName(){
			
			var stationName = $('#keyword').val();
			var url = ctx + "biz/pumpStation/selectStationByName?name="+stationName;
			
			var flag = [[${flag}]];
			
			if( flag == 1){
				url = ctx + "biz/pumpStation/selectStationNoUseByName?name="+stationName;
			}
			
			
			$.ajax({
		        url: url,
		        data: {},
		        type: "post",
		        success: function(result) {
		        	if(result.code == 0){
		        		if( result.data != null && result.data.length > 0  ){
		        			var t= "";
		        			for(var i = 0; i < result.data.length ; i++){
		        				t =  t+'<label class="col-sm-4 control-label cs-con content-search'+result.data[i].id+'" onclick="selectedStation('+result.data[i].id+')" ps-id="'+result.data[i].id+'">'+result.data[i].name+'</label>'
		        			}
		        			$('#station-content').html(t.toString());
		        		}else{
		        			if( flag == 1 ){
		        				$('#station-content').html('<label class="col-sm-4 control-label content-search">未查询到数据或者没有可设置告警的泵站</label>');
		        			}
		        		}
		        	}else{
		        		$('#station-content').html('<label class="col-sm-4 control-label content-search">未查询到数据</label>');
		        	}
		        }
		    })
		}
		
		
		function selectedStation(id){
			var name = $('.content-search'+id).text();
			$('#stationName').val(name);
			$('#psId').val(id);
			$('.cs-con').css("background-color","");
			$('.content-search'+id).css("background-color","#efefef");
		}
	
		
	</script>
</body>
</html>
